<template>
  <div class="content">
    <div class="content-item">
      <h3>我发表的文章</h3>
      <span>共 <i>{{publishNum}}</i> 篇</span>
      <a href="">去发表></a>
      <!-- tag=0 为发表的文章 -->
      <Article :articles="articles" v-if="articles" />
      <div class="no-article" v-else>
        <p>您还未发表过文章</p>
        <a href="">前往发表</a>
      </div>
    </div>
    <div class="content-item">
      <h3>我收藏的文章</h3>
      <span>共 <i>{{collectNum}}</i> 篇</span>
      <a href="">去收藏></a>
      <!-- tag=1 为收藏的文章 -->
      <Article :articles="articles2" v-if="articles2" />
      <div class="no-article" v-else>
        <p>您还未收藏过文章</p>
        <a href="">前往收藏</a>
      </div>
    </div>
  </div>
</template>


<script>
  import Article from 'components/article/Article'
  export default {
    name: 'Content',
    components: {
      Article
    },
    data() {
      return {
        publishNum: 0,
        collectNum: 0,
        articles: [
          {
            id: 1,
            imgUrl: '',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            createTime: '2022-1-1'
          },
          {
            id: 2,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F092919113248%2F1Z929113248-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=1a9f454e545e640d10a88c8c035816e6',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            createTime: '2022-1-1'
          },
          {
            id: 3,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            createTime: '2022-1-1'
          },
          {
            id: 4,
            imgUrl: '',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            createTime: '2022-1-1'
          },
          {
            id: 5,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            createTime: '2022-1-1'
          },
          {
            id: 6,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            createTime: '2022-1-1'
          },
        ],
        articles2: [
          {
            id: 1,
            imgUrl: '',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 2,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F092919113248%2F1Z929113248-8-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=1a9f454e545e640d10a88c8c035816e6',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 3,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 4,
            imgUrl: '',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 5,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
          {
            id: 6,
            imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242326224L3-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647748041&t=176dd056a3706a78d9c4610bc4ad8ee8',
            title: '标题标题标题标题标题标题标题标题标题',
            content: '文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章',
            author: 'mqe2'
          },
        ]
      }
    }
  }
</script>

<style scoped>
  .content-item {
    position: relative;
    margin-bottom: 50px;
  }

  .content-item h3 {
    font-weight: 400;
    border-bottom: 1px solid #86a3b1;
    padding-bottom: 8px;
  }

  .content-item span {
    position: absolute;
    top: 5px;
    right: 65px;
    font-size: 15px;
  }

  .content-item>a {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 12px;
    text-decoration: underline;
  }

  .content-item>a:hover {
    color: #86a3b1;
  }

  .content-item span i {
    color: #86a3b1;
  }

  .no-article {
    text-align: center;
    margin: 100px 350px;
  }

  .no-article a {
    display: block;
    height: 30px;
    line-height: 28px;
    background-color: #86a3b1;
    border: 1px solid #86a3b1;
    border-radius: 30px;
    color: #fff;
    margin-top: 10px;
  }

  .no-article a:hover {
    background-color: transparent;
    color: #86a3b1;
  }
</style>